<template>
  <div class="n-songtb" v-if="data">
    <div class="u-title u-title-1 f-cb">
      <h3><span class="f-ff2">歌曲列表</span></h3>
      <span class="sub s-fc3"
        ><span id="playlist-track-count">{{
          trackCount  ? trackCount : null
        }}</span
        >首歌</span
      >
      <div class="more s-fc3">
        播放：<strong id="play-count" class="s-fc6">{{
          playCount ? playCount : null
        }}</strong
        >次
      </div>
    </div>
    <div class="j-flag" id="auto-id-ox0IG7frPgTCRf2g">
      <table class="m-table">
        <thead>
          <tr>
            <th class="first w1"><div class="wp">&nbsp;</div></th>
            <th><div class="wp af0"></div></th>
            <th class="w2"><div class="wp af1"></div></th>
            <th class="w3"><div class="wp af2"></div></th>
            <th class="w4"><div class="wp af3"></div></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in playlist" :key="index" :class="{'even':index%2 == 0}">
            <td class="left">
              <div class="hd">
                <span :class="['ply' , {'ply-z-slt' : index == playingIcon}]" @click.stop="send_music(item.id , index, $event)"></span
                ><span class="num">{{ index + 1 }}</span>
              </div>
            </td>
            <td>
              <div class="f-cb">
                <div class="tt">
                  <span class="txt">
                    <a href="javascript:;">{{ item.name }}</a>
                    <span title="播放mv" class="mv" v-if="item.mv"></span>
                  </span>
                </div>
              </div>
            </td>
            <td
              class="s-fc3"
              @mouseenter="enter(index)"
              @mouseleave="is_show = null"
            >
              <span class="u-dur" v-show="is_show !== index">{{
                item.dt | time
              }}</span>
              <div class="opt" v-show="is_show == index">
                <a
                  href="javascript:;"
                  class="u-icn u-icn-81 icn-add"
                  title="添加到播放列表"
                ></a>
                <span class="icn icn-fav" title="收藏" @click="sc(item.id , $event)"></span>
                <span class="icn icn-share" title="分享"></span>
                <span class="icn icn-dl" title="下载"></span>
              </div>
            </td>
            <td>
              <div class="text">
                <a href="javascript:;">{{ item.ar[0].name }} </a>
              </div>
            </td>
            <td>
              <div class="text">
                <a href="javascript:;">{{ item.al.name }} </a>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { Time } from "../../../components/tool/tool";
import {check_music} from '../../../network/play'
export default {
  props: ["data"],
  data() {
    return {
      playlist:[], //歌曲列表
      trackCount:null, //歌单中包含都少歌曲
      playCount:null, //被播放了多少次
      playingIcon:0,
      is_show: null, //为时长的td 收藏/下载/分享 的样式转换
    };
  },
  methods: {
    send_music(id , index , e) {  //发送音乐单曲id
        this.$store.dispatch("music_ct",{music_id:id , pageY:e.pageY})
        this.playingIcon = index
        sessionStorage.setItem("piaying_index" ,index)
    },
    enter(index) {      //鼠标划过td
      this.is_show = index;
    },
    sc(id , e) {            //收藏
      if (!this.$store.state.token) {
        this.$Alter.show("还没有登录哦", 2000);
        return;
      }
      this.$SC.isshow( e.pageY, id);
    },
  },
  filters: {
    time(v) {
      return Time(v);
    },
  },
  // watch: {
  //   data(value){
  //       this.playlist = value.tracks
  //       this.trackCount = value.trackCount
  //       this.playCount = value.playCount
  //   }
  // },
  created(){    //正在播放的歌曲高亮显示 持久化
  
     this.playlist = this.data.tracks
     this.trackCount = this.data.trackCount
     this.playCount = this.data.playCount
  }
};
</script>

<style scoped>
.n-songtb {
  margin-top: 27px;
}
.u-title-1 {
  height: 33px;
}
.u-title {
  border-bottom: 2px solid #c20c0c;
}
.u-title-1 h3 {
  font-size: 20px;
  line-height: 28px;
}
.u-title h3 {
  float: left;
  font-weight: normal;
}
.f-ff2 {
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}
.u-title-1 .sub {
  margin: 9px 0 0 20px;
}
.u-title .sub {
  float: left;
}

.u-title-1 .more {
  margin-top: 5px;
}
.u-title .more {
  float: right;
}
.s-fc6,
a.s-fc6:hover {
  color: #c20c0c;
}
.m-table {
  width: 100%;
  border: 1px solid #d9d9d9;
}
.m-table .w1 {
  width: 74px;
}
.m-table th,
.m-table th .wp,
.m-table td,
.m-table .ply,
.m-table .mv,
.m-table .icn,
.m-info .edit {
  background: url("../../../assets/imgs/table.png") no-repeat 0 9999px;
}
.m-table .even td {
    background-color: #f7f7f7;
}
.m-table th {
  height: 38px;
  background-color: #f7f7f7;
  background-position: 0 2px;
  background-repeat: repeat-x;
  vertical-align: top;
  text-align: left;
  font-weight: normal;
  color: #666;
}
.m-table th.first .wp {
  background: none;
}
.m-table th .wp {
  height: 18px;
  line-height: 18px;
  padding: 8px 10px;
  background-position: -1px -56px;
}
.m-table .af0:after {
  content: \6b4c \66f2 \6807 \9898;
}
.m-table .w2 {
  width: 111px;
}
.m-table .w3 {
  width: 14%;
}
.m-table .w4 {
  width: 20%;
}
.m-table .af1:after {
  content: "\65f6 \957f";
}
.m-table .af2:after {
  content: "\6b4c \624b";
}
.m-table .af3:after {
  content: "\4e13 \8f91";
}
.m-table tr.even {
  background-color: #f7f7f7;
}
.m-table .even td {
  background-color: #f7f7f7;
}
.m-table td {
  position: relative;
  padding: 6px 10px;
  line-height: 18px;
  text-align: left;
}
.m-table .hd {
  height: 18px;
}
.m-table .hd .ply {
  float: right;
}
.m-table .ply {
  width: 17px;
  height: 17px;
  cursor: pointer;
  background-position: 0 -103px;
}
.m-table .ply:hover {
  background-position: 0 -128px;
}
.m-table .ply-z-slt{
    background-position: -20px -128px;
}
.m-table .hd .num {
  width: 25px;
  margin-left: 5px;
  color: #999;
}
.m-table .tt {
  float: left;
  width: 100%;
  height: 18px;
  margin-right: 20px;
}
.m-table .txt {
  position: relative;
  display: inline-block;
  padding-right: 25px;
  margin-right: -25px;
  max-width: 80%;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-table .mv,
.m-table .icnfix {
  position: absolute;
  top: 0;
  right: 0;
}
.m-table .txt:hover {
  text-decoration: underline;
}
.s-fc3,
a.s-fc3:hover {
  color: #666;
}
.m-table .opt {
  float: left;
}
.u-icn,
.u-title-1 .out .icon {
  background: url("../../../assets/imgs/icon.png") no-repeat 0 9999px;
}
.u-icn,
.u-icn2,
.u-icn3 {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}
.u-icn-81 {
  width: 13px;
  height: 13px;
  background-position: 0 -700px;
}
.u-icn-81:hover {
  background-position: -22px -700px;
}
.m-table .u-icn-81 {
  float: left;
  margin-top: 2px;
}

.m-table .mv,
.m-table .icn {
  float: left;
  width: 18px;
  height: 16px;
  margin: 2px 0 0 4px;
  overflow: hidden;
  text-indent: -999px;
  cursor: pointer;
}
.m-table .mv {
  width: 23px;
  height: 17px;
  margin: 1px 0 0 0;
  background-position: 0 -151px;
}
.m-table .icn-fav {
  background-position: 0 -174px;
}
.m-table .icn-fav:hover {
  background-position: -20px -174px;
}
.m-table .icn-share {
  background-position: 0 -195px;
}
.m-table .icn-share:hover {
  background-position: -20px -195px;
}
.m-table .icn-dl {
  background-position: -81px -174px;
}
.m-table .icn-dl:hover {
  background-position: -104px -174px;
}
.m-table .text {
  width: 100%;
  position: relative;
}
.m-table .text a {
  line-height: 20px;
  display: inline-block;
  max-width: 90%;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-table .text a:hover {
  text-decoration: underline;
}
</style>